<template>
  <div>
    <Section class="bg-base-300">
      <div class="flex flex-col lg:flex-row lg:items-stretch">
        <div class="flex w-full items-center lg:w-1/2">
          <div class="pt-10 text-center lg:max-w-md lg:pt-0 lg:text-left">
            <h1
              class="font-sans text-4xl font-medium leading-tight sm:text-5xl"
            >
              关于 ABlog
            </h1>
            <h3
              class="py-4 font-sans text-base font-medium uppercase tracking-widest text-primary"
            >
              ABlog是一个专属的空间，让你可以随时随地记录自己的学习心得、项目经验和技术分享。
            </h3>
            <p class="font-sans text-base-content/60">
              本应用是由
              <span class="text-primary">江西高校</span>
              在校、即将毕业学生中的技术爱好者共同建设和维护的专属空间。
              旨在帮助同学们快速、高效地记录自己的学习心得、项目经验和技术分享！
              同时该网站也是技术验证和展示的平台，完全原创开发！
              <span class="text-accent">
                在文章中分享的技术也同样会应用在网站中！
              </span>
            </p>
            <p class="my-2 text-base-content/60">
              <span class="text-error">所以本应用的用户不能通过注册获得!</span>
              敬请见谅！
            </p>
          </div>
        </div>
        <div class="flex-1">
          <AboutSVG />
        </div>
      </div>
    </Section>
    <Section>
      <SectionTitle title="技术栈">
        <p class="lg:max-w-md">
          如同建站目的所言，这个网站也是一种技术展示和验证的平台。尽管
          <strong class="font-medium text-primary"> Vue </strong>
          并不是构建Blog网站的最佳技术（Nuxt技术栈也在考虑中，，，），但由于展示前端技术的需要，本网站是完全构建在
          <strong class="font-medium text-primary"> Vue </strong>
          基础之上的，但不依赖任何第三方的组件库。
        </p>
      </SectionTitle>
      <h3 class="font-sans text-lg font-medium">主要技术：</h3>
      <ul class="text-base-content/60">
        <li
          class="my-2 capitalize transition-colors duration-300 hover:text-secondary"
          v-for="skill in skills"
          :key="skill.label"
        >
          <a class="flex items-center gap-2" :href="skill.url" target="_blank">
            <div
              class="flex h-6 w-6 items-center justify-center rounded-full bg-primary/60 text-primary-content"
            >
              <svg viewBox="0 0 24 24" class="h-3 w-3">
                <path
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M20 6 9 17l-5-5"
                ></path>
              </svg>
            </div>
            <span class="text-lg">{{ skill.label }}</span>
          </a>
        </li>
      </ul>
    </Section>
    <Section class="bg-base-300">
      <SectionTitle title="关于作者">
        本网站应用是由在校、即将毕业学生中的技术爱好者共同建设和维护。
        我们还将持续改进用户界面，为用户提供更好的体验和技术展示效果。
        也欢迎大家提出宝贵意见和建议！
      </SectionTitle>
      <div class="avatar-group">
        <div class="avatar" v-for="author in authors" :key="author.id">
          <div
            class="tooltip w-12"
            :data-tip="`${author.nickname} & ${author.job}`"
          >
            <RouterLink
              :to="{ name: 'author-details', params: { id: author.id } }"
            >
              <img
                :src="author.avatar ?? `/api/avatar/${author.nickname}.svg`"
              />
            </RouterLink>
          </div>
        </div>
      </div>
    </Section>
  </div>
</template>
<script setup lang="ts">
import { useApiFetch, ApiResponse } from "@/composables/useApiFetch";
import type { User, Resume } from "@/stores/types";

const skills = [
  {
    label: "vue",
    icon: "skill-vue",
    url: "https://cn.vuejs.org/",
  },
  {
    label: "vue-router",
    icon: "skill-vue",
    url: "https://router.vuejs.org/zh/",
  },
  {
    label: "pinia",
    icon: "skill-pinia",
    url: "https://pinia.vuejs.org/zh/",
  },
  {
    label: "pinia-plugin-persistedstate",
    icon: "skill-pinia",
    url: "https://prazdevs.github.io/pinia-plugin-persistedstate/",
  },
  {
    label: "tailwind css",
    icon: "skill-tailwindcss",
    url: "https://tailwindcss.com/",
  },
  {
    label: "daisyui",
    icon: "skill-daisyui",
    url: "https://daisyui.com/",
  },
  {
    label: "vueuse",
    icon: "skill-vueuse",
    url: "https://vueuse.org/",
  },
  {
    label: "fetch && useFetch",
    icon: "skill-fetch",
    url: "https://vueuse.org/core/useFetch/",
  },
  {
    label: "vee-validate",
    icon: "skill-vue",
    url: "https://vee-validate.logaretm.com/",
  },
  {
    label: "zod",
    icon: "skill-zod",
    url: "https://zod.dev/",
  },
  {
    label: "markdown-it",
    icon: "skill-markdown-it",
    url: "https://markdown-it.github.io/",
  },
];
const { data } = useApiFetch("/authors-by").json<ApiResponse<User & Resume>>();
const authors = computed(() => data.value?.query.results || []);
</script>
